/*
 * @Author: MarioGo
 * @Date: 2021-11-06 17:27:58
 * @LastEditTime: 2021-11-10 14:52:34
 * @LastEditors: MarioGo
 * @Description: 文件描述
 * @FilePath: /zheye/src/hooks/useClickOutside.ts
 * 可以输入预定的版权声明、个性签名、空行等
 */
import { ref, onMounted, onUnmounted, Ref } from 'vue';

const useClickOutside = (elementRef: Ref<null | HTMLElement>) => {
  const isClickOutside = ref(false);
  const handler = (e: MouseEvent) => {
    if (elementRef.value) {
      // console.log('e :>> ', elementRef.value, e.target);
      //如果点击元素 不是dropdown节点 则关闭
      if (!elementRef.value.contains(e.target as HTMLElement)) {
        isClickOutside.value = false;
      } else {
        isClickOutside.value = true;
      }
    }
  };
  onMounted(() => {
    document.addEventListener('click', handler);
  });
  onUnmounted(() => {
    document.removeEventListener('click', handler);
  });

  return isClickOutside;
};

export default useClickOutside;
